document.addEventListener('DOMContentLoaded', (event) => {
    const canvasRegle = document.getElementById('regle');
    const ctxRegle = canvasRegle.getContext('2d');

    // Définir la largeur en pixels pour chaque centimètre (20 cm sur une largeur de 800 pixels)
    const cmParPixel = canvasRegle.width / 20;

    // Définir le décalage initial pour commencer légèrement à l'intérieur de la règle
    const decalageInitial = 10;

    // Dessiner la règle
    function dessinerRegle() {
        ctxRegle.clearRect(0, 0, canvasRegle.width, canvasRegle.height);
        ctxRegle.font = '12px Arial';
        ctxRegle.strokeStyle = 'black';
        ctxRegle.lineWidth = 1;
        for (let i = 0; i <= 20; i++) {
            const x = decalageInitial + i * cmParPixel;
            ctxRegle.beginPath();
            ctxRegle.moveTo(x, 0);
            ctxRegle.lineTo(x, i % 2 === 0 ? 40 : 20);
            ctxRegle.stroke();
            if (i % 2 === 0) {
                ctxRegle.fillText(i + ' cm', x - 10, 55);
            }
        }
    }

    // Initialiser la règle
    dessinerRegle();

    // Fonction pour dessiner le trait
    window.dessinerTrait = function() {
        const longueur = parseInt(document.getElementById('longueur').value);
        
        if (isNaN(longueur) || longueur < 1 || longueur > 20) {
            alert("Veuillez entrer une longueur valide entre 1 et 20 cm.");
            return;
        }

        // Effacer la zone de dessin avant de dessiner le nouveau trait
        ctxRegle.clearRect(0, 60, canvasRegle.width, 40);

        // Redessiner la règle
        dessinerRegle();

        // Dessiner le trait
        const longueurPixels = longueur * cmParPixel;
        ctxRegle.beginPath();
        ctxRegle.moveTo(decalageInitial, 75);
        ctxRegle.lineTo(decalageInitial + longueurPixels, 75);
        ctxRegle.strokeStyle = 'red';
        ctxRegle.lineWidth = 5;
        ctxRegle.stroke();
    };

    // Fonction pour réinitialiser
    window.reinitialiser = function() {
        // Effacer la zone de dessin
        ctxRegle.clearRect(0, 60, canvasRegle.width, 40);

        // Redessiner la règle
        dessinerRegle();

        // Réinitialiser le champ de saisie
        document.getElementById('longueur').value = '';
    };
});